<template>
  <div class="search">

    <div class="indexSearchTitle">
      Search scholars
    </div>

    <el-container>
      <el-input
          type="text"
          v-model="text"
          placeholder="中国学者、外国学者"
          suffix-icon="el-icon-search"
          maxlength="50"
          show-word-limit
          clearable
          @keydown.enter="searchInfo(text)">
      </el-input>

      <el-button type="primary" class="searchBtn" @click="searchInfo(text)">搜索</el-button>
    </el-container>


    <div class="indexSearchDes">
      200,000,000+ scholars
    </div>


  </div>
</template>

<script>
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: "authorSearch",

  data() {
    return {
      text: "",
      journal: false,
      conference: false,
    }
  },
  setup() {
    return {

    }
  },
  methods: {
    searchInfo(text) {
      if(text === '' ) {
        ElMessage({
          type: 'warning',
          message: '搜索不能为空',
        })
        return
      }
      console.log('search  '+text);

      while (text === '') {}

      const {href} = this.$router.resolve({
        path: '/authorSearch',
        query: {
          key: text,
        }
      });
      window.open(href, '_self')

    },
  }

}
</script>

<style scoped>

.indexSearchTitle {
  margin-bottom: 3%;

  text-align: center;

  font-size: xx-large;
  font-family: "Times New Roman",serif;
  color: #333333;
}

.indexSearchDes {
  margin-top: 4%;
  text-align: center;

  font-size: x-large;
  font-family: "Apple SD Gothic Neo",serif;
  color: #333333;

}

.search {

  margin-left: 15%;
  margin-right: 20%;
}

.searchBtn ::v-deep {
  margin-left: 2%;
  --el-button-border-color: rgb(66,130,209);
  --el-button-background-color: rgb(66,130,209);
}

.searchOptions::v-deep  {
  margin-top: 10px;
  margin-bottom: 20px;
  color: rgb(66,130,209);
  lighting-color: white;

  --el-checkbox-checked-font-color: rgb(66,130,209);
  --el-checkbox-checked-icon-color: black;
  --el-checkbox-checked-background-color: white;
}






</style>